<template>
	<view class="container" style="min-height: 100vh">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList"></popup-active>
		<view v-if="originalFlag == 1">
			<!-- <view v-html="detailData.originalContent"></view> -->
			<rich-text class="content" :nodes="originalContent"></rich-text>
			<view class="footer">
				<view class="care" @click="dianzan()">
					<image class="image" :src="dianzans === 1 ? thumbsImgYellow : thumbsImgHeart" mode="aspectFill"></image>
					<text class="text">{{ giveLikeNum }}</text>
				</view>
			</view>
		</view>
		<web-view v-else :src="contentUrl"></web-view>
	</view>
</template>

<script>
import http from '../../common/request.js';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import {getCommonShareInfo} from '@/common/utils.js'
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	components: {
		popupActive
	},
	data() {
		return {
			popScreenList: [],
			showHonor: false,
			dianzans: 2,
			originalFlag: 1,
			contentUrl: '',
			originalContent: '',
			id: '',
			giveLikeNum: 0,
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/zan.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png'
		};
	},
	onLoad: function(option) {
		//页面第一次加载是会触发，可以把一些不需要实时更新的数据放入
		this.id = option.contentId;
	},
	mounted() {
		this.getDetails();
	},
	methods: {
		dianzan(num) {
			if (this.dianzans !== 1) {
				http('/api/sysContentLike/dataIncr', {
					method: 'post',
					data: {
						contentId: this.id
					}
				}).then(res => {
					this.dianzans = res.data.likeType;
					this.giveLikeNum = res.data.count;
					//todo 老田
					const list = res.data.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				});
			} else {
				http('/api/sysContentLike/dataDecr', {
					method: 'post',
					data: {
						contentId: this.id
					}
				}).then(res => {
					this.dianzans = res.data.likeType;
					this.giveLikeNum = res.data.count;
					//todo 老田
					const list = res.data.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				});
			}
		},
		getDetails() {
			http('/api/sysContentInfo/biography/detail/' + this.id, {
				method: 'get'
			}).then(result => {
				const data = result.data || {};
				this.originalFlag = data.originalFlag;
				setTimeout(r => {
					this.contentUrl = data.contentUrl;
					this.originalContent = data.originalContent;
				}, 0);
				this.dianzans = data.likeType == null ? 2 : data.likeType;
				this.giveLikeNum = data.giveLikeNum;
			});
		}
	}
};
</script>

<style scoped lang="less">
.container {
	padding: 24rpx 40rpx;
	background: #fff;
	.title {
		font-size: 30rpx;
		font-weight: 400;
		color: #66645d;
		line-height: 42rpx;
		text-align: center;
		margin-bottom: 24rpx;
	}
	.content {
		font-size: 28rpx;
		font-weight: 300;
		color: #8a8c8d;
		line-height: 46rpx;
		img {
			margin: 24rpx 0;
		}
		margin-bottom: 24rpx;
	}
	.footer {
		display: flex;
		justify-content: flex-end;
		.care {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 15rpx 0 15rpx 15rpx;
			.image {
				width: 28rpx;
				height: 26rpx;
				margin-right: 12rpx;
			}
			.text {
				font-size: 24rpx;
				color: #B2B1AE;
			}
		}
	}
}
</style>
